<div class="modal-header">
    <h4 class="modal-title">
        <span *ngIf="title">{{title}}</span>
    </h4>
    <span class="pull-right">
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
            [disabled]="saving">
            <i aria-hidden="true" class="bi bi-x"></i>
        </button>
    </span>
</div>
<div class="modal-body" [busyIf]="isLoading">
    <tabset class="tab-container tabbable-line">
        <tab class="pt-3" heading="{{'普通栏目' | localize}}">
            <div class="row">
                <div class="col-sm-6 col-rybox">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="lvtit">栏目选择</h3>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <select class="form-control edited" size="4" style="height:300px;">
                                    <option *ngFor="let menu of menuData" [value]="menu.auxiliaryId" (click)="selectMenus(menu)">
                                        {{menu.path}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-hjbl">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="lvtit">已选栏目</h3>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <select class="form-control edited" size="4" style="height:300px;">
                                    <option *ngFor="let selectedMenu of selectedMenus" [value]="selectedMenu.auxiliaryId" (click)="removeSelectedMenus(selectedMenu)">
                                        {{selectedMenu.path}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </tab>
        <tab  class="pt-3" heading="{{'专题' | localize}}"  *ngIf="false">
            <div class="row">
                <div class="col-sm-2 col-rybox">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="lvtit">栏目选择</h3>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <select class="form-control edited" size="4" style="height:300px;" name="selectedZtMenu"  [(ngModel)]="selectedZtMenu">
                                    <option *ngFor="let menu of ztMenuData" [value]="menu.auxiliaryId" (click)="selectZtMenus(menu)">
                                        {{menu.path}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-10 col-hjbl">
                    <div class="row">
                        <div class="col-sm-11 margin-bottom-5">
                            <div class="input-group margin-bottom-10">
                                <input name="filter" [(ngModel)]="filter" class="form-control" [placeholder]="l('SearchWithThreeDot')" type="text"/>
                                <span class="input-group-btn">
                                    <button (click)="refreshGrid()" class="btn default" type="submit"><i class="icon-magnifier"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table #dataTable sortMode="multiple" (onLazyLoad)="refreshGrid($event)"
                                [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                [(selection)]="selectedZtRows"
                                selectionMode="multiple">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width:38px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th>
                                            {{'Title' | localize}}
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 38px">
                                            <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                                         </td>
                                        <td style="width: 200px">
                                            <span class="p-column-title"> 产品标题</span>
                                            {{record.title  | stringTruncate:35}}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{'NoData' | localize}}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="refreshGrid($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                    [showCurrentPageReport]="true"
                                    [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount">
                                </p-paginator>
                            </div>
                        </div>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
             </div>
        </tab>
    </tabset>
</div>
<div class="modal-footer">
    <div class="form-group form-md-line-input form-md-floating-label no-hint mr-3" *ngIf="typeSelect">
        <select id="NodeName" name="NodeName" class="form-control edited" [(ngModel)]="data.managementType" >
            <option *ngFor="let rec of typeList" [value]="rec.value">
                {{rec.name}}
            </option>
        </select>
    </div>
    <button type="button" class="btn btn-default font-weight-bold" (click)="close()">
        {{"Cancel" | localize}}
    </button>
    <button type="button" class="btn btn-primary blue" [disabled]="isLoading"  [buttonBusy]="saving" 
        [busyText]="l('SavingWithThreeDot')" (click)="save()">
        <i class="fa fa-save"></i>{{"Confirm" | localize}}</button>
</div>